.sales-detail {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: #f8f8f8;

  .sales-total {
    height: 152px;
    margin: 16px 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    text-align: center;
    .total-item {
      flex: 1;
      color: #01110e;
    }
    .txt {
      font-size: 26px;
    }
    .value {
      font-weight: 600;
      font-size: 34px;
    }
  }
}

.sales-history {
  height: 78px;
  overflow: hidden;
  box-sizing: border-box;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 20px 24px;
  background-color: #fff;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.order-info {
  padding: 20px 24px;
  background-color: #fff;
  .info-item {
    color: #535353;
    display: flex;
    margin-bottom: 16px;
    align-items: center;
    justify-content: space-between;
    .value {
      color: #01110e;
    }
  }

  .info-imgs {
    margin-top: 24px;
    margin-bottom: 4px;
    overflow-x: scroll;
    .info-img {
      width: 154px;
      height: 154px;
      border-radius: 8px;
      &:not(:first-child) {
        margin-left: 26px;
      }
    }
  }
}

.sales-table {
  margin-top: 16px;
  background-color: #fff;

  .table-title {
    color: #006251;
    padding: 20px 24px;
  }
  .table-bar {
    .table-header {
      height: 46px;
      padding: 0 38px;
      color: #535353;
      background: #f8f8f8;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #979797;
      border-bottom: 1px solid #979797;

      & > text {
        flex: 1;
      }
    }

    .table-body {
      .table-th {
        overflow: hidden;

        &:not(:last-child) {
          border-bottom: 1px solid #dedede;
        }

        .table-td {
          padding: 16px 38px;
          .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #fff;
            .label {
              color: #535353;
            }
            .value {
              max-width: 60%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              color: #01110e;
            }
          }
        }
      }
    }
  }
}

.upload-group {
  margin-top: 18px;
  background-color: #fff;
  .upload-list {
    display: flex;
    flex-wrap: wrap;
    .upload-img-bar {
      width: 172px;
      height: 172px;
      margin-right: 25px;
      margin-top: 25px;
      position: relative;
      .upload-img {
        width: 100%;
        height: 100%;
        border-radius: 8px;
      }
    }
  }
}
.icon-arrow {
  position: relative;
  padding-right: 30px;
  &::before {
    content: '>';
    width: 16px;
    right: 0;
    top: 50%;
    color: #ccc;
    position: absolute;
    font-weight: 400;
    transform: translateY(-60%) scale(1, 2);
  }
}

.btn-extra {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background-color: #fff;
  padding: 16px 27px;
  display: flex;
  align-items: center;
  box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.07);

  .btn {
    flex: 1;
    height: 88px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(to right, #8dc456, #006251);
  }
}
